<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

const viewerEl = ref(null)
let viewer

onMounted(() => {
  viewer = new Cesium.Viewer(viewerEl.value, {
    animation: false,
    timeline: false,
    geocoder: false,
    homeButton: true,
    sceneModePicker: true,
    navigationHelpButton: false,
    baseLayerPicker: true,
  })




  Cesium.Cesium3DTileset.fromUrl('http://127.0.0.1:9001/out3/tileset.json')
    .then((tileset) => {
      viewer.scene.primitives.add(tileset)
      
      // 改善模型亮度的简化设置
      // 1. 增加场景曝光度
      viewer.scene.exposure = 1.5
      
      // 2. 调整光照
      viewer.scene.globe.enableLighting = true
      
      // 3. 调整后处理效果以增强亮度
      if (viewer.postProcessStages.bloom) {
        viewer.postProcessStages.bloom.enabled = true
        viewer.postProcessStages.bloom.uniforms.glowOnly = false
      }
      
      return viewer.zoomTo(tileset)
    })
    .catch((err) => {
      console.error('Failed to load 3D Tiles:', err)
    })
})
</script>

<template>
  <div class="viewer" ref="viewerEl"></div>
</template>

<style scoped>
.viewer {
  position: absolute;
  inset: 0;
}
</style>
